<template>
  <div class="addlive">
    <header>
      <p>
        <router-link to="/">《——</router-link>
      </p>
      <p>创建直播</p>
      <p>
        <span>...</span>
        <span>o</span>
      </p>
    </header>
    <main>
      <van-uploader>
        <van-button icon="plus" type="primary">
          <p>添加直播封面图</p>
        </van-button>
      </van-uploader>
      <input type="text" placeholder="请输入直播主题" />
      <button class="button">开启直播</button>
    </main>
  </div>
</template>

<script>
export default {};
</script>


<style lang="scss" scoped>
.addlive {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
    background-color: rgb(34, 100, 177);
    color: #fff;

    p:first-child {
      a {
        color: #fff;
      }
    }
    p:nth-child(3) {
      border: 1px solid rgb(226, 226, 226);
      width: 60px;
      height: 26px;
      border-radius: 26px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
  main {
    flex: 1;
    overflow-y: scroll;
    .van-uploader {
      width: 100%;
      height: 200px;
        background-color: rgb(160, 95, 95);
      .van-uploader__wrapper {
        width: 100%;
        height: 200px;
        background-color: rgb(153, 226, 177);
        .van-uploader__input-wrapper {
          width: 100%;
          height: 200px;
          background-color: rgb(124, 182, 209);
          .van-button {
            width: 243%;
            height: 200px;
          }
          .van-button--primary {
            background-color: rgb(236, 227, 227);
            border: none;
            color: #000;
          }
          input.van-uploader__input {
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 200%;
            overflow: hidden;
            cursor: pointer;
          }
        }
      }
    }
    input {
      display: block;
      margin: 20px auto;
      width: 96%;
      height: 56px;
      border-left: 1px solid #000;
    }
    .button {
      position: absolute;
      bottom: 1px;
      left: 8px;
      display: block;
      margin: 20px auto;
      width: 96%;
      height: 56px;
      border: none;
      background-color: rgb(107, 158, 224);
    }
  }
}
</style>